<template>
  <div>
    <el-input v-model="likeName" placeholder="请输入内容" clearable class="input" @keydown.enter.native="selectname"></el-input>
    <el-button type="primary" @click.native="selectname">搜索</el-button>
    <el-button type="primary" @click="dialog=true">新增</el-button>
    <el-table :data="userData" style="width:100%">
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          <el-tag>{{scope.row.name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <el-tag type="danger">{{sexName[scope.row.sex]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间">
        <template slot-scope="scope">
          <el-tag>{{scope.row.create_time|fromatDate}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
        <template slot-scope="scope">
          <el-tag>{{scope.row.address}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="oyupd(scope)">编辑</el-button>
          <el-button type="text" @click="delUser(scope.row.user_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="changeMaxSize" @current-change="changePageSize" :current-page="currentPage"
      :page-sizes="pageSizes" :page-size="pageSize" layout="total,sizes,prev,pager,next,jumper" :total="total">
    </el-pagination>
    <!-- 抽屉 -->
    <div class="from-content">
      <el-drawer title="新增用户" :before-close="cancel" :visible.sync="dialog" direction="ltr" custom-class="demo-drawer"
        ref="addDrawer" size="50%">
        <!-- 表单 -->
        <div class="from-container">
          <el-form label-position="left" :model="user" :rules="rules" ref="addUser">
            <el-form-item label="账号" prop="account">
              <el-input v-model="user.account"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="user.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="user.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="user.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="user.phone"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="user.sex">
                <el-radio :label="0">保密</el-radio>
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="收货地址" prop="address">
              <el-input v-model="user.address"></el-input>
            </el-form-item>
            <el-button type="primary" @click="addUser('addUser')">新增</el-button>
            <el-button>取消</el-button>
          </el-form>
        </div>
      </el-drawer>
    </div>
    <!--编辑用户 -->
    <el-drawer title="修改用户" :visible.sync="oydialog" direction="rtl" :before-close="cancel" size="50%">
      <div class="from-container">
        <el-form :model="oyfrom" :rules="oyrules" label-width="100px" class="demo-ruleForm" ref="oyfrom">
          <el-form-item label="账号" prop="account">
            <el-input v-model="oyfrom.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="oyfrom.password" show-password></el-input>
          </el-form-item>
          <el-form-item label="name" prop="name">
            <el-input v-model="oyfrom.name"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="oyfrom.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="oyfrom.phone"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="oyfrom.sex">
              <el-radio :label="0">保密</el-radio>
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="收货地址" prop="address">
            <el-input v-model="oyfrom.address"></el-input>
          </el-form-item>
          <div class="oy">
            <el-button type="primary" @click="oyupate('oyfrom')">修改</el-button>
            <el-button>取消</el-button>
          </div>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  export default {
    data() {
      return {
        userData: [],
        currentPage: 1,
        pageSizes: [10, 100, 200, 300],
        pageSize: 10,
        total: 400,
        sexName: ['保密', '男', '女'],
        likeName: "",
        dialog: false,
        oydialog: false,
        user: {
          account: "",
          password: "",
          name: "",
          email: "",
          phone: "",
          sex: 0,
          address: ""
        },
        rules: {
          account: [{
            required: true,
            message: '用户的账号不能为空',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '用户的密码不能为空',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '用户的姓名不能为空',
            trigger: 'blur'
          }],
          email: [{
            type: "email",
            message: '用户邮箱格式不正确',
            trigger: 'change'
          }, {
            required: true,
            message: '用户的邮箱不能为空',
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            message: '用户的手机号不能为空',
            trigger: 'blur'
          }],
          address: [{
            required: true,
            message: '用户的收货地址不能为空',
            trigger: 'blur'
          }]
        },
        oyfrom: {
          account: "",
          password: "",
          name: "",
          email: "",
          phone: "",
          sex: 0,
          address: "",
          user_id:"",
          version:""
        },
        oyrules: {
          account: [{
            required: true,
            message: '用户的账号不能为空',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '用户的密码不能为空',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '用户的姓名不能为空',
            trigger: 'blur'
          }],
          email: [{
              type: "email",
              message: '用户邮箱格式不正确',
              trigger: 'change'
            },
            {
              required: true,
              message: '用户的邮箱不能为空',
              trigger: 'blur'
            }
          ],
          phone: [{
            required: true,
            message: '用户的手机号不能为空',
            trigger: 'blur'
          }],
          address: [{
            required: true,
            message: '用户的地址不能为空',
            trigger: 'blur'
          }]
        }
      }

    },
    components: {

    },
    methods: {
      changeMaxSize(maxSize) {
        //改变一页容纳的总条数
        //默认接收到的总条数,但是我需要总条数和当前页面
        console.log(maxSize)
        let currentPage = this.currentPage
        let likeName = this.likeName
        this.getUserData(currentPage, maxSize, likeName)
      },
      //改变页码时
      changePageSize(pageSize) {
        //默认接收改变的页码,但是我需要总条数和当前页码
        let maxSize = this.pageSize
        let likeName = this.likeName
        this.getUserData(pageSize, maxSize, likeName)
      },
      selectname() {
        let likeName = this.likeName
        let pageSize = this.pageSize
        this.getUserData(1, pageSize, likeName)
      },
      getUserData(page, maxSize, likeName) {
        let params = {
          page,
          maxSize
        }
        if (likeName != null && likeName != "") {
          params['likeName'] = likeName
        }
        axios.get("http://chenxueli.site:8081/ssm/selectPageUserList", {
            params
          })
          .then((res) => {
            if (res.data.resultCode == 0) {
              //将获取到的真实数据赋给变量
              let data = res.data.data
              //将列表数据复制到data的userData属性中
              this.userData = data.list
              //当前页面
              this.currentPage = data.pageNum
              //一页显示的总条数
              this.pageSize = data.pageSize
              //总条数
              this.total = data.total
            } else {
              alert(res.data.message)
            }
          })
      },
      //删除
      delUser(userId) {
        let params = {
          userId
        }
        this.$confirm('此操作将永久删除该记录', '是否继续', {
          confirmButtonText: '残忍丢弃',
          cancelButtonText: '容我再想想',
          type: 'warning',
        }).then(() => {
          //点击确认
          //将payload参数转化为formData
          params = qs.stringify(params)
          axios.post("http://chenxueli.site:8081/ssm/deleteUser", params)
            .then((res) => {
              if (res.data.resultCode == 0) {
                this.$message({
                  type: 'success',
                  message: res.data.message
                })
                let page = this.currentPage
                let maxSize = this.pageSize
                let likeName = this.likeName
                this.getUserData(page, maxSize, likeName)
              } else {
                this.$message({
                  type: 'error',
                  message: res.data.message
                })
              }
            })

        }).catch(() => {
          点击删除
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      //关闭抽屉
      cancel(done) {
        done();
      },
      addUser(refName) {
        console.log(refName)
        //校验
        this.$refs[refName].validate((valid) => {
          if (valid) {
            //校验成功!需要发送请求给服务器进行新增
            console.log("校验通过啦")
            let params = this.user
            params = qs.stringify(params)
            axios.post("http://chenxueli.site:8081/ssm/addUser", params)
              .then((res) => {

                if (res.data.resultCode == 0) {
                  //给出新增成功的提示
                  this.$message({
                    type: 'success',
                    message: res.data.message
                  })
                  //抽屉内的内容全部清空
                  this.$refs[refName].resetFields()
                  //关闭抽屉
                  this.dialog = false
                  //获取第一页的数据
                  this.getUserData(1, 10, null)
                } else {
                  this.$message({
                    type: 'success',
                    message: res.data.message
                  })
                }
                console.log(res)

              })
          } else {

          }
        })
      },
      //打开抽屉并获取当前修改用户的值并将值赋值到抽屉输入框上
      oyupd(obj) {
        this.oydialog = true
        let oyfrom=obj.row
        this.oyfrom.account=oyfrom.account
        this.oyfrom.password=oyfrom.password
        this.oyfrom.name=oyfrom.name
        this.oyfrom.email=oyfrom.email
        this.oyfrom.phone=oyfrom.phone
        this.oyfrom.sex=oyfrom.sex
        this.oyfrom.address=oyfrom.address
        this.oyfrom.user_id=oyfrom.user_id
        this.oyfrom.version=oyfrom.version

      },
      oyupate(refName){
        this.$refs[refName].validate((valid)=>{
          if(valid){
            let params=this.oyfrom
            params=qs.stringify(params)
            axios.post("http://chenxueli.site:8081/ssm/updateUser",params)
            .then((res)=>{
                  
                  if(res.data.resultCode==0){
                    //给出修改成功的提示
                    this.$message({
                      type: 'success',
                      message: res.data.message
                    })
                    //关闭抽屉
                    this.oydialog=false
                    //跳转到第一页
                    this.getUserData(1,10,null)
                  }else{
                    this.$message({
                      type: 'success',
                      message: res.data.message
                    })
                  }
            })
          }
        })
      }



    },
    mounted() {
      this.getUserData(1, 10, null)
    },
    //过滤器
    filters: {
      fromatDate(data) {
        return new Date(data).toLocaleString().replace(/:\d{1,2}$/, ' ');
      }
    }

  }
</script>

<style>
  .input {
    width: 180px;
  }

  .from-container {
    width: 100%;
    height: 300px;
    overflow-y: scroll;
  }

  .oy {

    width: 200px;
    margin: 0 auto;
  }
</style>
